<template>
  <div>
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <br />
    <span>苹果{{ price }}/斤,折扣{{ discount }}《折》</span><br />
    请输入你要购买的斤数 <input type="number" v-model="num">
    <button @click="btnFn">结账买单~</button>
    <p>结账单：总价{{total}}￥元 折后价：{{newTotal}}￥元 省了：{{save}}￥元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      total:'',
      newTotal:'',
      save:'',
      num:''
    };
  },
  methods: {
    btnFn(){
      this.total=this.price*this.num
      this.newTotal=this.total*(this.discount/10)
      this.save=this.total-this.newTotal
    }
  }
};
</script>

<style>
span {
  font-size: 700;
}
</style>
